<template>
  <view class="h-scroll-wrap">
    <scroll-view
      :scroll-y="true"
      :refresherEnabled="true"
      :refresher-triggered="triggered"
      :style="{height: `calc(100vh - ${height}rpx)`}"
      @refresherRefresh="handlePullDownRefresh"
      @scrollToLower="handleScrollToLower"
    >
      <slot></slot>
      <view class="loading" v-if="loading">
        <view class="spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";

export default {
  name: "hScrollList",
  props: {
    height: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      triggered: true,
      loading: false,
    }
  },
  onShow() {
    this.triggered = this.triggeredData
  },
  methods: {
    handleCloseTrigged() {
      this.triggered = false
    },
    handlePullDownRefresh() {
      console.log('下拉刷新')
      this.triggered = true
      Taro.startPullDownRefresh();
      this.$emit('pull')
      setTimeout(() => {
        // 停止下拉刷新
        this.triggered = false
        Taro.stopPullDownRefresh()
      }, 1000)
    },

    handleScrollToLower() {
      this.loading = true
      console.log('触底事件，做上拉加载')
      this.$emit('load')
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  },
  watch: {
  }
}
</script>

<style>
.scroll-view-item {
  border-bottom: 1PX solid #efefef;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #636363;
}
.scroll-view-item:last-child {
  margin-bottom: 20PX;
}
.spinner {
  width: 20px;
  height: 20px;
  background-color: #d5ad57;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(60px) }
  50% { -webkit-transform: perspective(60px) rotateY(180deg) }
  100% { -webkit-transform: perspective(60px) rotateY(180deg)rotateX(180deg) }
}

@keyframes rotateplane {
  0% {
    transform: perspective(60px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(60px) rotateX(0deg) rotateY(0deg)
  } 50% {
      transform: perspective(60px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(60px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(60px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(60px) rotateX(-180deg) rotateY(-179.9deg);
      }
}
.loading {
  font-size: 20rpx;
  color: #b6b6b6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
.loading-text {
  margin-left: 20rpx;
}
</style>
